<template>
  <el-container class="home-container">
    <el-backtop :visibility-height="200" :right="60" :bottom="60">
      <div>
        <el-icon><ArrowUpBold /></el-icon>
      </div>
    </el-backtop>
    <!-- body -->
    <el-container>

      
      <!-- aside -->

      <el-aside :width="iscollapse ? '64px' : '200px'">
        <!-- 侧边栏菜单 -->
        <div class="toggle-button" @click="toggleCollapse">|||</div>

        <el-menu
          background-color="rgb(59,96,113)"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
          :collapse="iscollapse"
          :collapse-transition="false"
        >
           <el-menu-item index="/forum">
          <el-icon>
            <Management />
          </el-icon>
          <template v-slot:title> <span>论坛中心</span></template>
        </el-menu-item>
        <el-menu-item index="/home">
          <el-icon>
            <Opportunity />
          </el-icon>
          <template v-slot:title> <span>场地预约</span></template>
        </el-menu-item>
        <el-menu-item index="/Siping">
          <el-icon>
            <HelpFilled />
          </el-icon>
          <template v-slot:title> <span>馆藏分布</span></template>
        </el-menu-item>
        <el-menu-item index="/myInf">

          <el-icon>
            <UserFilled />
          </el-icon>
          <template v-slot:title> <span>个人主页</span></template>
        </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- main -->

      <el-main>
        <div class="content">
          <h1 style="color: rgba(164, 58, 58, 0.688); font-size: 30px">
            &nbsp;&nbsp;&nbsp; 图书详情
          </h1>

          <!-- 第1页 -->
          <div class="page">
            <div>
              <img id="bookimg" src="" class="picture1" />
            </div>

            <div class="booktext" style="padding-left: 100px">
              <br><br><br>
              <p class="title">
                <b><i>{{bookname}} </i></b>
              </p>
              <br />
              <div class="border"></div>
              <br>

              <p style="font-size: 17px; color: rgb(67, 74, 102)">
                <b>{{author}} 著</b>
                <br />
                <b> {{trans}} </b>
                <br />
                <b>{{publisher}}</b>
                <br /><br />
              </p>

              <p class="grey">{{book_repre}}</p>
              <br />
              <p style="font-size: 17px">
                <b>ISBN: {{isbn}}</b>

                <br />
                <b>馆藏编号：{{book_id}}</b>

                <br /><br />

                <el-rate
                  v-model="value"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                >
                </el-rate>
                <br /><br />
              </p>

              <el-button type="primary" plain @click="borrowSuccess"
                >立即借阅</el-button
              >

              <!-- <el-drawer v-model="drawer" title="图书借阅" :before-close="handleClose" :visible.sync="dialog" direction="rtl"
                custom-class="demo-drawer" ref="drawer">
                <div class="demo-drawer__content">
                  <el-form :model="form">
                    <el-form-item label="借阅期限" :label-width="formLabelWidth">

                      <el-select v-model="form.region" placeholder="请选择节约期限">
                        <el-option label="14天" value="shanghai"></el-option>
                        <el-option label="30天" value="beijing"></el-option>
                      </el-select>

                    </el-form-item>

                  </el-form>
                  <div class="demo-drawer__footer">
                    <el-button type="primary" plain @click="$refs.drawer.closeDrawer()">确定
                    </el-button>
                  </div>
                </div>
              </el-drawer> -->
            </div>
          </div>

          <br /><br /><br /><br /><br />

          <div class="border"></div>

          <br /><br /><br /><br />

          <h1 style="color: rgba(164, 58, 58, 0.688); font-size: 30px">
            <br />
            &nbsp;&nbsp;&nbsp; 图书详情
          </h1>

          <br /><br />
          <p style="font-size: 23px">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <b>内容简介</b>
          </p>
          <!-- 第2页 -->
          <div class="page">
            <div
              class="booktext"
              style="padding-top: 60px; padding-right: 40px; line-height: 40px"
            >
              <p style="font-size: 17px; text-align: left">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                {{book_text}}
              </p>
            </div>

            <div>
              <img id="bookimg2" src="" class="picture2" />
            </div>
          </div>

          <h1 style="color: rgba(164, 58, 58, 0.688); font-size: 30px">
            <br />
            &nbsp;&nbsp;&nbsp; 图书详情
          </h1>

          <!-- 第3页 -->
          <div class="page">
            <div>
              <img id="authorimg" src="" class="picture3"  />
            </div>

            <div class="booktext">
              <p style="font-size: 23px">
                <b>作者简介</b>
              </p>

              <p style="font-size: 16px; text-align: left; line-height: 40px">
                &nbsp;&nbsp;&nbsp;&nbsp; {{author_text}}
              </p>
            </div>
          </div>

          <br /><br /><br />

          <div class="border"></div>
          <br />
          <h1 style="color: rgba(164, 58, 58, 0.688); font-size: 30px">
            &nbsp;&nbsp;&nbsp; 评价与反馈
          </h1>
          <br /><br />

          <!-- 尾页 -->
          <div
            style="display: inline-block; font-size: 18px; padding-left: 80px"
          >
            <div class="block">
              <span class="demonstration">请选择您对本书的评价：</span>
              <br /><br />
              <el-rate v-model="value1" @change="upd" show-text=""></el-rate>
            </div>

            <br /><br /><br />


            <br /><br /><br />
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
const axios = require("axios");
import { ElMessage } from "element-plus";

export default 
{
  name: "app",

  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      // 是否折叠
      iscollapse: true,

      // 本书评分
      value: 5,
      value1: -5,
      counts: 0,

      textarea2: "",

      // 抽屉
      // drawer: false,

      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "80px",
      timer: null,
      dialog: false,

      //书籍详情
      bookname: ' ',
      isbn:1,
      author:1,
      trans:1,
      publisher:1,
      book_repre:1,
      book_id:1,
      book_text:1,
      author_text:1,
      book_img:1,
      author_img:1,
      
     userid: window.sessionStorage.getItem('userid'),
     choosedate:'',
    };
  },

  created() {
    this.getParams(); //在页面渲染完毕时接收馆藏发来的书名参数
    this.getdate();//页面建立时获取当前时间
  },
 
   mounted() 
   {
        // 页面建立时获取本书评分
        // axios.get('http://localhost:8080/score').then((res) => {
        //     console.log(res)
        //     this.$data.value = res.data.currentScore
        //     this.$data.counts=res.data.num
        // })
        
        //获取书籍详情
        axios({
        method: 'post',
        params: {
          bookname:this.bookname, 
        },
        url: '/api/BookInfo/GETBOOKINFObyNAME',
      }).then((res) => {
        console.log(res)

        this.$data.bookname = res.data[0].BOOK_NAME
        this.$data.isbn = res.data[0].ISBN
        this.$data.author = res.data[0].BOOK_AUTHOR
        this.$data.trans = res.data[0].BOOK_TRANSLATER
        this.$data.publisher = res.data[0].BOOK_PUBLISHER
        this.$data.book_repre = res.data[0].BOOK_REPRE
        this.$data.book_text = res.data[0].BOOK_TEXT
        this.$data.author_text = res.data[0].BOOK_AUTHORABOUT
        
        //获取评分
        this.$data.value = res.data[0].RATE
        this.$data.counts=res.data[0].RATE_PEOPLE_NUMBER

        //获取图片
        this.$data.book_img=res.data[0].BOOK_IMG
        this.$data.author_img=res.data[0].AUTHOR_IMG

        document.getElementById("bookimg").src = this.book_img
        document.getElementById("bookimg2").src = this.book_img
        document.getElementById("authorimg").src = this.author_img
        console.log(this.book_img)

        
      }, error => {
        console.log('错误', error.message)
      })


    },

  methods: {
        //接收馆藏发来的书名
    getParams() {
      const routerParams = this.$route.query.bookName;
      this.bookname = routerParams; //这里更改bookname
      const routerParams1 = this.$route.query.book_id;
      this.book_id = routerParams1; //这里更改bookname
    },
    watch: {
      $route: "getParams",
    },

    //触发change事件时启动，根据后台评分情况更新当前分数
    upd() {
      console.log(this.value);
      console.log(this.value1);
      console.log(this.counts);

      this.counts = Number(this.counts)+1;
      console.log('test',this.counts);
      this.value = (this.value1 + this.value * (this.counts-1)) / this.counts;
      this.value = this.value.toFixed(2);

      //axios post方式
      axios({
        method: "post",
        params: {

          bookname: this.bookname,
          rate: this.value,
        },
        url: 'api/BookInfo/UPDATEBOOKRERATEbyNAMEandNOT',
      }).then((res) => {
        console.log('/a1', res)
      }, error => {
        console.log('错误', error.message)
      })

      //axios post方式
      axios({
        method: "post",
        params: {

          bookname: this.bookname,
          peoplenumber: this.counts,
        },
        url: 'api/BookInfo/UPDATEBOOKPEOPLEbyNAMEandNOT',
      }).then((res) => {
        console.log('/a1', res)
      }, error => {
        console.log('错误', error.message)
      })

    },
    getdate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();        
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }          
           this.choosedate = year + "." + month + "." + strDate;
           
        },
    borrowSuccess() {
      
      axios({
        method: "post",
        params: {
          bookid: this.book_id,
          loan_people_id: this.userid,
        },
        url: 'api/LoanBooks/INSERTBOOKLOAN',
      }).then((res) => {
        console.log('/a1', res)
        if(res.data){
          ElMessage({
        message: "借阅成功！",
        type: "success",
      });
        }
        else {
           ElMessage({
        message: "图书已被借阅或损坏，借阅失败！",
        type: "fail",
      });
        }
        
      }, error => {
        console.log(this.$data.book_id)
        console.log('错误', error.message)
      })

    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 点击按钮，切换菜单折叠
    toggleCollapse() {
      this.iscollapse = !this.iscollapse;
    },
    update() {},
  },
};
</script>

<style  scoped>
.home-container {
  height: 700px;
}

.bg1 {
  background-image: url(../assets/bg4.jpg);
}

.el-header {
  background-color: #303133;

  display: flex;
  justify-content: space-between;
  align-items: center;
  color: aliceblue;
  font-size: 25px;
}

.el-aside {
  background-color: rgb(59, 96, 113);
}

.el-main {
  background-color: rgb(248, 243, 243);
}

.el-menu {
  border: none;
}

.toggle-button {
  color: white;
  text-align: center;
  line-height: 34px;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.title {
  color: rgb(50, 76, 126);
  font-size: 35px;
}

.grey {
  color: grey;
  font-size: 18px;
}

a:hover {
  color: red;
}

.content {
  /* background-color: rgb(248, 243, 243); */

  width: 1500px;
  padding: 30px;
}

.booktext {
  display: inline-block;
  text-align: center;
  padding: 40px;
  height: 800px;
  width: 500px;
  float: left;
}

.border {
  height: 2px;

  background-color: brown;
}

.picture1 {
  height: 600px;
  width: 500px;
  padding-top: 60px;
  float: left;
}

.picture2 {
  height: 450px;
  width: 450px;
  padding-left: 50px;
  float: left;
}

.picture3 {
  height: 450px;
  width: 400px;
  padding: 50px;
  float: left;
  object-fit:cover;
}

.page {
  width: 1100px;
  height: 900px;
  padding-left: 100px;
}
</style>

